<template>
  <section class="category-wrap" ref="categoryWrap">
    <!-- 左侧分类导航 -->
    <div class="nav-side-wrapper" ref="sidewrapper">
      <ul class="nav-side">
        <li
          v-for="(item, index) in list"
          :class="{ cur: index == num }"
          @click="changeBar(index)"
          :key="index"
        >
          {{ item.name }}
        </li>
      </ul>
    </div>
    <div class="content-wrapper" ref="contentwrapper">
      <div class="content-slide" v-for="(item, index) in getdata" :key="index">
        <img :src="item.mainImgUrl" class="category-main-img" />
        <div
          class="category-list"
          v-for="(category, index) in item.list"
          :key="index"
        >
          <p class="catogory-title">{{ category.title }}</p>
          <div
            class="product-item"
            v-for="(product, index) in category.productList"
            :key="index"
          >
            <img :src="product.imgUrl" class="product-img" />
            <p class="product-title">{{ product.title }}</p>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import BScroll from "better-scroll";
import fastclick from "fastclick";
import { getCategory } from "../../api/index";
export default {
  data() {
    return {
      list: [],
      num: 0,
    };
  },
  created() {
    getCategory((res) => {
      // console.log(res);
      this.list = res.data;
      this.$nextTick(() => {
        new BScroll(this.$refs.sidewrapper, {});
        new BScroll(this.$refs.contentwrapper, {});
      });
    }),
      fastclick.attach(document.body);
  },
  computed: {
    getdata() {
      return this.list.filter((ele, index) => index == this.num);
    },
  },
  mounted() {
    this.setSearchWrapHeight();
  },
  methods: {
    // 固定父容器高度
    setSearchWrapHeight() {
      let $screenHeight = document.documentElement.clientHeight;
      this.$refs.categoryWrap.style.height = $screenHeight - 100 + "px";
    },
    changeBar(index) {
      // console.log('-----------',index);
      this.num = index;
    },
  },
};
</script>

<style lang="scss" scoped>
.category-wrap {
  display: flex;
  justify-content: space-between;
  margin-top: 100px;
  width: 100%;
  // margin-bottom: 100px;

  .nav-side-wrapper {
    width: 28%;
    height: 100%;
    // box-sizing: border-box;
    overflow: hidden;
    .nav-side {
      width: 100%;
      background: #f8f8f8;
      box-sizing: border-box;
      li {
        width: 100%;
        height: 92px;
        text-align: center;
        line-height: 92px;
        font-size: 28px;
      }
      .cur {
        color: #f00;
        background-color: #fff;
      }
    }
  }

  .content-wrapper {
    width: 72%;
    height: 100%;
    overflow: hidden;

    .content-slide {
      width: 100%;
      padding: 0 20px;
      background: #fff;
      box-sizing: border-box;

      .category-main-img {
        width: 100%;
      }

      .category-list {
        display: flex;
        flex-wrap: wrap;
        flex-shrink: 0;
        width: 100%;

        .catogory-title {
          width: 100%;
          font-size: 34px;
          font-weight: 500;
          padding: 40px 0;
        }

        .product-item {
          width: 33.3333%;
          margin-bottom: 20px;
          text-align: center;
          font-size: 30px;

          img {
            width: 100%;
          }
        }
      }
    }
  }
}
</style>